<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		ul{
			list-style: none;
		}
		span{
			background: #808080;
			display: inline-block;
			width: 200px;
/*			text-align: center;*/
		}
		ul li span:nth-child(3){
			background:#F2A93B ;
			text-align: center;
		}
		.active{
			display: inline-block;
		}

	</style>
</head>
<body>
歌手<input class="singer" type="text">歌曲<input class="song" type="text" ><button>添加</button>
<ul>
	<li>
		<span>歌手</span><span>歌手</span><span>操作</span>
	</li>
	<li>
		<span>许嵩</span><span>断桥残雪</span><span class="active">删除</span>
	</li>
	<li>
		<span>许嵩</span><span>如约而至</span><span class="active">删除</span>
	</li>
</ul>
<script type="text/javascript">
	let li = document.createElement('li')
	let singer = document.querySelector('.singer')
	console.log(singer.value)
	let song = document.querySelector('.song') 
	console.log(song.value)
	let but = document.querySelector('button')
	let ul = document.querySelector('ul')
	but.onclick = function(){
		li.innerHTML=`<span>${singer.value}</span><span>${song.value}</span><span class="active">删除</span>`
		if(singer.value == '' || singer.value == ''){
			alert('不能为空')
		}else{
		ul.appendChild(li)			
		}
	}
	function del(){
		let del = document.querySelectorAll('.active')
		for(let i = 0;i<del.length; i++){
			del[i].onclick = function(){
				this.parentNode.style.display = 'none'
			}
		}
	}


	
</script>
</body>
</html>